import React from 'react';
import { Row } from 'antd';
import PropTypes from 'prop-types';
import StandardTable from '@/components/StandardTable';
import Authority from './Authority';

const TabPanel = props => {
  const {
    authorityList,
    selectedRows,
    selectedRowKeys,
    loading,
    data,
    columns,
    onSelectRow,
    onChange,
    rowKey,
  } = props;

  return (
    <div>
      <Row style={{ marginBottom: 16 }}>
        {authorityList.map(auth => (
          <Authority key={auth.authority + auth.title} {...auth} />
        ))}
      </Row>
      <StandardTable
        selectedRows={selectedRows}
        selectedRowKeys={selectedRowKeys}
        loading={loading}
        data={data}
        rowKey={rowKey}
        columns={columns}
        onSelectRow={onSelectRow}
        onChange={onChange}
      />
    </div>
  );
};

TabPanel.propTypes = {
  authorityList: PropTypes.array.isRequired,
  selectedRows: PropTypes.array.isRequired,
  selectedRowKeys: PropTypes.array.isRequired,
  loading: PropTypes.bool,
  data: PropTypes.object.isRequired,
  columns: PropTypes.array.isRequired,
  onSelectRow: PropTypes.func.isRequired,
  onChange: PropTypes.func.isRequired,
  rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
};

TabPanel.defaultProps = {
  loading: false,
  rowKey: 'entryId',
};

export default React.memo(TabPanel);
